<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>OAL</title>
    <link rel="stylesheet"  href="../../common/css/bootstrap.min.css">
    <link rel="stylesheet"  href="../../common/css/daterangepicker.min.css">
    <link rel="stylesheet"  href="../../common/css/standard.css">
</head>
<body class="oal-layout-subPage">

<div class="oal-page">
    <div class="oal-page-content-section">

        <!-- Header -->
        <div class="oal-page-header-fixed">
            <div class="oal-page-header row">
                <div class="oal-page-header-logo-section">
                    <div class="oal-page-header-logo"></div>
                </div>
                <div class="oal-page-header-actions text-right">
                    <div class="oal-page-header-menu-list">
                        <div class="oal-page-header-menu-item oal-page-header-menu-promotion ">
                            <span>Seabird Promotion</span>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-myRate">
                            <div>My Rates<span class="badge">New</span></div>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-myShipment isActive">
                            <div>My Shipments<span class="badge">New</span></div>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-notification ">
                            <span>Notification</span>
                            <a  id="notificationPopover" data-container="body"
                                  data-placement="bottom" data-html="true"
                                  data-content="<div><ul class='popover-list'>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      </ul>
                                      <div class='popover-list-more'><a href='#'>More &gt;&gt;</a></div>
                                      </div>">
                                <span class="badge">
                                    New
                                </span></a>
                        </div>

                        <div class="oal-page-header-menu-item oal-page-header-userProfile">
                            <div aria-expanded="true" aria-haspopup="true" data-toggle="dropdown" class="btn-userProfile">
                                <span class="btn-userProfile-image"><img width="22px" src="../../common/images/default.png"></span>
                                <span class="action">Jason</span>
                                <span class="caret"></span>
                            </div>
                            <ul class="dropdown-menu oal-page-header-menu-dropdown">
                                <li><a href="homepage_setting.html"><span class= "pull-left oal-page-menu-icon-setting"></span>&nbsp;&nbsp;Setting</a></li>
                                <li><a href="#"><span class="pull-left oal-page-menu-icon-logOut"></span>&nbsp;&nbsp;Logout</a></li>
                            </ul>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-setting">
                            <span>Setting</span>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-logout">
                            <span>Logout</span>
                        </div>
                    </div>

                    <div class="oal-page-header-chat-miniScreen">
                        <a class="hamburger menu" href="javascript:void(0)"  data-tiggle="click" data-toggle="tooltip" data-placement="bottom" title="Menu" >
                            <div></div>
                            <div></div>
                            <div></div>
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <!-- Content -->
        <div class="oal-page-content">
            <div class="oal-page-content-item">
                <div class="oal-page-content-item-home">
                    <!-- Promo -->
                    <div class="oal-page-content-promo">
                        <div class="row oal-promo-item-list hide oal-promo-item-template">
                            <div class="oal-promo-item">
                                <div class="oal-box-shadow">
                                    <div  class="oal-promo-item-bg-image" >

                                    </div>
                                    <div class="oal-promo-item-bg" title="Click for Promotion Details"></div>
                                    <div class="oal-promo-item-sale oal-promo-item-sale-default" align="center">
                                        <div class="oal-promo-item-sale-text">
                                            <div class="oal-promo-item-sale-text-to">to</div>
                                            <div class="oal-promo-item-sale-text-port">Shanghai</div>

                                            <div class="oal-promo-item-sale-text-sale-area style-1 hide">
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per">10</div>
                                                    <div class="oal-promo-item-sale-text-sale-per-title">

                                                        <div>%</div>
                                                        <div>OFF</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-area  style-2 hide">
                                                <div class="oal-promo-item-sale-text-sale-more">More than</div>
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per">10</div>
                                                    <div class="oal-promo-item-sale-text-sale-per-title">
                                                        <div>%</div>
                                                        <div>OFF</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-area  style-3 hide">
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per-title ">
                                                        Lower Price
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-valid">Valid</div>
                                            <div class="oal-promo-item-sale-text-char">until</div>
                                            <div class="oal-promo-item-sale-text-number">Jun 07</div>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-actions">
                                        <div class="oal-promo-item-actions-detail">Click for Details <span class="glyphicon glyphicon-menu-down"></span></div>
                                        <div class="oal-promo-item-actions-records hide"  data-toggle="tooltip" data-placement="top" title="You had book this at">
                                            <span>My Booking</span>
                                        </div>
                                        <div class="oal-promo-item-actions-book hide">
                                            <span>Book Now</span>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-detail-info">
                                        <div class="oal-promo-item-detail-ss">

                                            <div class="oal-promo-item-detail-ss-etd">
                                                <div>ETA</div>
                                                <div>Aug 05</div>
                                                <div>TUE</div>
                                            </div>
                                            <div class="oal-promo-item-detail-ss-port">
                                                <div>
                                                    <span class="detail-icon"><img src="../../common/images/vessel.png"  /></span>
                                                    <span class="detail-to hide">to</span>
                                                    <span class="detail-pod"></span>
                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                    <div class="oal-promo-item-time-alert hide">
                                        <div class="oal-promo-item-time-alert-msg">
                                            <div><h2>&nbsp;</h2></div>
                                            <div>Today Only</div>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-alert hide">
                                        A visitor made booking today with this promotion.
                                    </div>
                                    <div class="oal-promo-item-sold hide">
                                        <span>SOLD<br>OUT</span>
                                    </div>
                                    <div class="oal-promo-item-book">
                                        <span>Book<br>Now</span>
                                    </div>


                                </div>

                            </div>
                        </div>
                        <div class="oal-promo-item-list-all"></div>
                        <div class="oal-promo-item-detail-overall  oal-promo-item-detail-overall-template hide oal-promo-item-detail-overall-init">
                            <div class="oal-promo-item-detail-overall-detail">
                                <!--
                                <div class="oal-promo-item-detail-overall-detail-title">
                                    <span class="detail-por">Southampton</span>
                                    <span class="oal-promo-item-detail-ss-transhipment-arrow"></span>
                                    <span class="detail-pod">Shanghai</span>
                                </div>
                                -->
                                <div class="row oal-promo-item-detail-overall-detail-result">
                                    <div class="col-lg-5 col-md-12 col-sm-12 oal-promo-item-detail-overall-detail-result-section1">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12  oal-promo-item-detail-overall-detail-title-box text-center">
                                                <div class="oal-promo-item-detail-overall-detail-title">
                                                    <div class="detail-por text-center">
                                                        <span class="city">Southampton</span>
                                                        <div class="detail-etd">Jul 05, Mon</div>
                                                    </div>
                                                    <div class="detail-arrow text-center">
                                                        <div class="oal-promo-item-detail-ss-transhipment-arrow"></div>
                                                        <div class="detail-vessel-voyage text-center">NYK REMUS-039W</div>
                                                    </div>
                                                    <div class="detail-pod text-center">
                                                        <span class="city">Sydney</span>
                                                        <div class="detail-eta">Aug 05, Mon</div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="row detail-info-margin">
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <h5 class="label">CY Cutoff</h5>
                                                <h5 class="result">Jun 12, Mon</h5>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <h5 class="label">Commodity</h5>
                                                <h5 class="result">General Cargo</h5>
                                            </div>
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <h5 class="label">Volume</h5>
                                                <h5 class="result">Min. 10 TEU</h5>
                                            </div>
                                            <div class="col-lg-5 col-md-5 col-sm-5 oal-promo-item-detail-overall-detail-result-hau">
                                                <h5 class="label">Haulage</h5>
                                                <div class="haulage-box">
                                                    <div class="haulage">CY/CY</div>
                                                    <div class="tips-icon">
                                                        <span class="glyphicon glyphicon-info-sign"></span>
                                                    </div>
                                                    <div class="tips">
                                                        <span>For door service haulage rate would apply.</span>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                    <div class="hidden-lg col-md-12 col-sm-12 col-xs-12 special-requirement-margin"></div>
                                    <div class="col-lg-3 col-md-5 col-sm-12 oal-promo-item-detail-overall-detail-result-section2">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <h5 class="label">Special Requirement</h5>
                                                <h5 class="result">
                                                    Light Weight Cargo (10~15 Tons per TEU)
                                                </h5>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12 remarks-margin">
                                                <h5 class="label">Remarks</h5>
                                                <h5 class="result">Subject to DOC, LSS and all destination charges.</h5>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-7 col-sm-12 oal-promo-item-detail-overall-detail-result-section3">
                                        <div class="row freight-section freight-section-border">
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <h5 class="label">Ocean Freight</h5>
                                                <table class="oal-promo-item-detail-overall-rate-table">
                                                    <tr>
                                                        <td>USD</td>
                                                        <td><span class="highlightText">$900</span>/20GP</td>
                                                        <td><span class="highlightText">$1000</span>/40GP</td>
                                                        <td><span class="highlightText">$1200</span>/40HQ</td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12 inland-surcharge-margin">
                                                <h5 class="label">Inland Surcharge</h5>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                                        <div class="oal-promo-item-detail-overall-inland-surcharge">
                                                            <div class="row">
                                                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 inland-city">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon inland-surcharge-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                        <input type="text" class="form-control inland-surcharge-field" placeholder="Inland City" aria-describedby="basic-addon1">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 surcharge">
                                                                    <span class="currency">USD</span><span class="fee">$0</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="oal-promo-item-detail-overall-action">
                                    <button class="btn btn-promo-action">Chat for any enquiries or book now</button>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!--News -->
                    <div class="oal-page-content-news-section oal-box-shadow">
                        <div class="oal-page-content-news-list">
                            <div class="oal-page-content-news-title">News Around Your Region</div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-12 news">
                                    <div class="news-item">
                                        <div class="news-date">
                                            <span class="news-date-day">20</span>
                                            <span class="news-date-month">Jun</span>
                                        </div>
                                        <div class="news-text">
                                            <div class="news-text-title">Asia to Europe Trade - Rate Restoration</div>
                                            <div class="news-text-details">Today is an exciting day that we start serving you �?our valued customer.  Hope you enjoy the new experience in Seabird and we are looking forward to hearing your valuable feedback.</div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="oal-page-content-news-item-detail ">
                            <div class="news-content oal-box-shadow">
                                <div class="news-content-left-bar">
                                    <div class="news-content-left-bar-elements">
                                        <span class="news-content-back-icon"></span>
                                        <span>Back</span>
                                    </div>

                                </div>
                                <div class="news-content-details ">
                                    <div class="news-text-title">Asia to Europe Trade - Rate Restoration</div>
                                    <div class="news-text-date">
                                        <span><img src="../../common/images/calender.png" width="22px"/> May 05 2016, Mon</span>
                                    </div>
                                    <div class="news-text-details"><p>Hong Kong Members of the G6 Alliance today announced additional void sailings within their Asia-Europe product to adjust to market demand.<br>

                                        As the G6 Alliance continues to review its product profile, the Loop 6 service will be suspended until further notice.<br>

                                        In order to deliver continuous coverage and service, the G6 Alliance will continue to provide the following rotation:<br>

                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.</p></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="oal-page-content-item-sub">
                    <!--my shipment -->
                    <div class="oal-page-content-rate-section oal-box-shadow">
                        <div class="oal-page-content-shipment-title col-lg-5">My Shipments</div>
                        <div class="pull-right"><a href="homepage_no_active_shipment.html">Non-active Shipments (5)</a></div>
                        <div class="oal-page-content-shipment-detail">
                            <div class="oal-my-shipment-search-row">
                                <div class="row">
                                    <div class="col-lg-8 col-md-8 col-sm-8  col-xs-12">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12  col-sm-12 col-xs-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-search"></span>
                                                    </span>
                                                    <ul class="form-control search-filters">
                                                        <li class="search-filter-field">
                                                            <input class="search-filter-input" type="text" autocomplete="false">
                                                        </li>
                                                    </ul>
                                                    <span class="input-group-addon oal-my-shipment-search-more"  data-toggle="modal" data-target="#btnAdvancedSearch">
                                                        <span >More</span>
                                                    </span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                        <div class="row">
                                            <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12 text-right">
                                                <div class="form-inline">
                                                    <div class="form-group">

                                                        <div class="input-group">
                                                            <span class="input-group-addon">
                                                                Sort by
                                                            </span>
                                                            <select class="form-control" id="my_shipment_filter">
                                                                <option>ETD</option>
                                                                <option>ETA</option>
                                                                <option>Origin</option>
                                                                <option>Destination</option>
                                                                <option>Reference Tag</option>
                                                            </select>
                                                            <span class="input-group-addon">
                                                                <i class="fa fa-sort-amount-asc sortby"></i>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <ul class="oal-my-shipment-list">
                                <li class="oal-my-shipment-list-item new">
                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                                <div class="shipment-number text-nowrap">
                                                    <span class="text-bold"><span class="new-indicator badge">New</span>4999920040</span>
                                                    <span><a href="javascript:void(0);" class="shipment-item-notification"  data-container="body"
                                                             data-trigger="popover"   data-placement="bottom" data-html="true"
                                                             title=""
                                                             data-content="<div><div class='pop-shipment-notification'><ul class='popover-list'>
                                                                  <li class='popover-list-item'><div>B/L# 4999920040  Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                                                  <li class='popover-list-item'><div>B/L# 4999920040  Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                                                  <li class='popover-list-item'><div>B/L# 4999920040  Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                                                  <li class='popover-list-item'><div>B/L# 4999920040  Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                                                  <li class='popover-list-item'><div>B/L# 4999920040  Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                                                  <li class='popover-list-item'><div>B/L# 4999920040  Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                                                  <li class='popover-list-item'><div>B/L# 4999920040  Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                                                  <li class='popover-list-item'><div>B/L# 4999920040  Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                                               </ul>
                                                            </div>
                                                            <div class='popover-list-more'><a href='homepage_notification.html'>Detail &gt;&gt;</a></div>
                                                        </div>">
                                                        <i class="fa fa-bell"></i><b>10</b></a></span>
                                                </div>
                                                <div class="latest-event">
                                                    <i class="fa fa-circle green-dot">&nbsp;&nbsp;</i> Latern returned (3/5)
                                                </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                                <div>
                                                    <span class="from-to-city">Sowerby Bridge</span><span class="from-to-country"> (GB)</span>
                                                </div>
                                                <div>
                                                    <span class="od-city">Liverpool (LIV)</span>
                                                </div>
                                                <div>
                                                    <span class="text-grey">ETD: 30 Jun (Thu)</span>
                                                </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <div class="arrow-box">
                                                <div class="oal-promo-item-detail-ss-transhipment-arrow"> </div>
                                                <div class="oal-promo-item-detail-ss-door"></div>
                                            </div>

                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                                <div>
                                                    <span class="from-to-city">Owosso</span> <span class="from-to-country">(US)</span>
                                                </div>
                                            <div>
                                                    <span class="od-city">Montreal (MTR)</span>
                                            </div>
                                            <div>
                                                    <span class="text-grey">ETA: 08 Jul (Sun)</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 action-box">
                                            <div class="btn-quick-chat" title="Chat for any enquiries"></div>
                                        </div>

                                        <div class="add-tag">
                                            <span class="text-grey"><a href="javascript:void(0);">+ Add tag</a></span>
                                            <input maxlength="64" class="tag-input">
                                            <div class="customer_tag_group">
                                                <i class="fa fa-bookmark-o"></i>
                                                <div class="customer_tag"></div>
                                                <i class="fa fa-remove delete-tag"></i>
                                            </div>

                                        </div>
                                        <div class="btn-view-detail" id="btn_detail1" onclick="showShipmentDetail(this, 'div_shipment_detail1')">
                                            Details <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                        </div>
                                    </div>

                                    <div class="row oal-my-shipment-list-item-detail" id="div_shipment_detail1">
                                        <div class="col-lg-5 col-md-5 col-s-12 col-xs-12">
                                            <div class="shipment-detail-information">
                                                <div class="item-title">Booking Status</div>
                                                <div class="item-content">Confirmed</div>

                                                <div class="item-title">BL Details</div>
                                                <div class="item-content">BL No.: 4999920040 - B/L Proforma Ready</div>

                                                <div class="item-title">Agreement No</div>
                                                <div class="item-content">00001719</div>

                                                <div class="item-title">Vessel Voyage</div>
                                                <div class="item-content">GEX1 OTTAWA EXPRESS 62W25</div>

                                                <div class="item-title">Advanced Customs Manifest</div>
                                                <div class="item-content">Required</div>

                                                <div class="item-title">Unified Consignment Reference Submission</div>
                                                <div class="item-content">6GB399426986000-SLDSSE00009845</div>
                                                <div class="item-title">Container Size / Type & Cargo</div>
                                                <div class="item-content">General / 1 x 40GP / Rubber Granules</div>
                                                <div class="item-title">Containers</div>
                                                <div class="item-content">
                                                    <ul>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109971">OOLU109971 <i class="fa fa-search-plus"></i></a></span> </li>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109972">OOLU109972 <i class="fa fa-search-plus"></i></a></span></li>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109974">OOLU109974 <i class="fa fa-search-plus"></i></a></span></li>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109975">OOLU109975 <i class="fa fa-search-plus"></i></a></span></li>
                                                    </ul>
                                                </div>

                                                <div class="item-title">Service Offering</div>
                                                <div class="item-content">-</div>

                                                <div class="item-title">Special Requirements</div>
                                                <div class="item-content">-</div>

                                            </div>


                                        </div>
                                        <div class="col-lg-7 col-md-7 col-s-12 col-xs-12 shipment-detail-milestones">
                                            <ul>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            20 Jun<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Booking Created</div>
                                                            <div class="item-content">Status: Confirmed</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            22 Jun<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Empty Picked up (5/5)</div>
                                                            <div class="item-content">@ Seaforth Terminal</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            23 Jun<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Latern Returned (3/5)</div>
                                                            <div class="item-content">@ Seaforth Terminal</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            23 Jun<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">SI Received</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            28 Jun<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Unique Consignment Reference Cutoff</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            29 Jun<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Loaded on Vessel</div>
                                                            <div class="item-content">AAA1 KOTA LAYAR 062</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            30 Jun<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Departure from Liverpool</div>
                                                            <div class="item-content">GEX1 OTTAWA EXPRESS 62W25</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            04 Jul<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Transshipment at</div>
                                                            <div class="item-content">@ ASF Port Logistics Pty Ltd</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            08 Jul<br>
                                                            17:55 EDT
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Arrival at Montreal</div>
                                                            <div class="item-content">@ ASF Port Logistics Pty Ltd</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            12 Jul<br>
                                                            17:55 EDT
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Cargo Availability</div>
                                                            <div class="item-content">@ CN Rail (Ferndale)</div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="oal-my-shipment-list-item new">
                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div class="promotion-tag-box">
                                                <div class="promotion-tag">
                                                    <img src="../../common/images/icon_promotion_shipment.png">
                                                </div>
                                            </div>
                                            <div class="shipment-number text-nowrap">
                                                <span class="text-bold"><span class="new-indicator badge">New</span>4999920130</span>
                                                <span><a href="homepage_notification.html"> <i class="fa fa-bell-o"></i></a></span>
                                            </div>
                                            <div class="latest-event">
                                                <i class="fa fa-circle green-dot">&nbsp;&nbsp;</i> CY Cutoff
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div>
                                                <span class="from-to-city">Wakefield</span><span class="from-to-country"> (GB)</span>
                                            </div>
                                            <div>
                                                <span class="od-city">Southampton (STN)</span>
                                            </div>
                                            <div>
                                                <span class="text-grey">ETD: 04 Jul (Mon)</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <div class="arrow-box">
                                                <div class="oal-promo-item-detail-ss-transhipment-arrow"> </div>
                                                <div class="oal-promo-item-detail-ss-door"></div>
                                            </div>

                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div>
                                                <span class="from-to-city">Shanghai</span> <span class="from-to-country">(CN)</span>
                                            </div>
                                            <div>
                                                <span class="od-city">Shanghai (SHA)</span>
                                            </div>
                                            <div>
                                                <span class="text-grey">ETA: 09 Aug (Tue)</span>
                                            </div>
                                        </div>

                                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 action-box">

                                            <div class="btn-quick-chat" title="Chat for any enquiries"></div>

                                        </div>

                                        <div class="add-tag">
                                            <span class="text-grey"><a href="javascript:void(0);">+ Add tag</a></span>
                                            <input maxlength="64" class="tag-input">
                                            <div class="customer_tag_group">
                                                <i class="fa fa-bookmark-o"></i>
                                                <div class="customer_tag">Orient Overseas Container Line Limited Orient Overseas Container</div>
                                                <i class="fa fa-remove delete-tag"></i>
                                            </div>
                                        </div>
                                        <div class="btn-view-detail" id="btn_detail2" onclick="showShipmentDetail(this, 'div_shipment_detail2')">
                                            Details <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                        </div>
                                    </div>
                                    <div class="row oal-my-shipment-list-item-detail" id="div_shipment_detail2">
                                        <div class="col-lg-5 col-md-5 col-s-12 col-xs-12">
                                            <div class="shipment-detail-information">
                                                <div class="item-title">BL Details</div>
                                                <div class="item-content">BL No.: 4999900100 - B/L Ready</div>

                                                <div class="item-title">Agreement No</div>
                                                <div class="item-content">00056556</div>

                                                <div class="item-title">Vessel Voyage</div>
                                                <div class="item-content">AAA1 OOCL PANAMA 160</div>

                                                <div class="item-title">Advanced Customs Manifest</div>
                                                <div class="item-content">Required</div>

                                                <div class="item-title">Unified Consignment Reference Submission</div>
                                                <div class="item-content">None</div>
                                                <div class="item-title">Container Size / Type & Cargo</div>
                                                <div class="item-content">General / 1 x 40GP / Rubber Granules</div>
                                                <div class="item-title">Containers</div>
                                                <div class="item-content">
                                                    <ul>
                                                        <li>
                                                            <span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109977">OOLU109977 <i class="fa fa-search-plus"></i></a></span>
                                                        </li>
                                                    </ul>
                                                </div>

                                                <div class="item-title">Service Offering</div>
                                                <div class="item-content">DD Free Time Extension (Det. Dest. Total Carrier Merchant Rule #1: General Free Times: >= 1 cntr has 14 free Calendar days.)</div>

                                                <div class="item-title">Special Requirements</div>
                                                <div class="item-content">-</div>

                                            </div>


                                        </div>
                                        <div class="col-lg-7 col-md-7 col-s-12 col-xs-12 shipment-detail-milestones">
                                            <!--
                                            <div class="alert alert-danger" role="alert">Please noted NO SHOW happened in this shipment, timeline is disabled.</div>
                                            -->
                                            <ul>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            16 Jun<br>
                                                            16:23 AEST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Booking Created</div>
                                                            <div class="item-content">Status: Confirmed</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            20 Jun<br>
                                                            17:52 AEST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Empty Picked up (5/5)</div>
                                                            <div class="item-content">@ QUBE Logistics (Brisbane Port Empty Park)</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            22 Jun<br>
                                                            18:20 AEST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">CY Cutoff</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            23 Jun<br>
                                                            19:05 AEST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Unique Consignment Reference Cutoff</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            24 Jun<br>
                                                            17:55 AEST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Departure from Brisbane</div>
                                                            <div class="item-content">AAA1 OOCL PANAMA 160</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            27 Jun<br>
                                                            12:55 MYT
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Arrival at Penang</div>
                                                            <div class="item-content">PEN SINAR SANGIR 323N</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            27 Jun<br>
                                                            12:55 MYT
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Cargo Avaliability</div>
                                                            <div class="item-content">@ CN Rail (Ferndale)</div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="oal-my-shipment-list-item">
                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div class="shipment-number text-nowrap">
                                                <span class="text-bold">4024143850</span>
                                                <span><a href="homepage_notification.html"> <i class="fa fa-bell-o"></i></a></span>
                                            </div>
                                            <div class="latest-event">
                                                <i class="fa fa-circle green-dot">&nbsp;&nbsp;</i> Booking Created
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div>
                                                <span class="from-to-city">Horsham</span><span class="from-to-country"> (GB)</span>
                                            </div>
                                            <div>
                                                <span class="od-city">Southampton (STN)</span>
                                            </div>
                                            <div>
                                                <span class="text-grey">ETD: 25 Jun (Sat)</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <div class="arrow-box">
                                                <div class="oal-promo-item-detail-ss-transhipment-arrow"> </div>
                                                <div class="oal-promo-item-detail-ss-door"></div>
                                            </div>

                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div>
                                                <span class="from-to-city">Hong Kong</span> <span class="from-to-country">(HK)</span>
                                            </div>
                                            <div>
                                                <span class="od-city">Hong Kong (HKG)</span>
                                            </div>
                                            <div>
                                                <span class="text-grey">ETA: 10 Aug (Wed)</span>
                                            </div>
                                        </div>


                                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 action-box">
                                            <div class="btn-quick-chat" title="Chat for any enquiries"></div>
                                        </div>
                                        <div class="add-tag">
                                            <span class="text-grey"><a href="javascript:void(0);">+ Add tag</a></span>
                                            <input maxlength="64" class="tag-input">
                                            <div class="customer_tag_group">
                                                <i class="fa fa-bookmark-o"></i>
                                                <div class="customer_tag"></div>
                                                <i class="fa fa-remove delete-tag"></i>
                                            </div>
                                        </div>
                                        <div class="btn-view-detail" id="btn_detail3" onclick="showShipmentDetail(this, 'div_shipment_detail3')">
                                            Details <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                        </div>
                                    </div>
                                    <div class="row oal-my-shipment-list-item-detail" id="div_shipment_detail3">
                                        <div class="col-lg-5 col-md-5 col-s-12 col-xs-12">
                                            <div class="shipment-detail-information">
                                                <div class="item-title">BL Details</div>
                                                <div class="item-content">BL No. : 4999901230 - B/L Inprogress</div>

                                                <div class="item-title">Agreement No</div>
                                                <div class="item-content">00056556</div>

                                                <div class="item-title">Vessel Voyage</div>
                                                <div class="item-content">AAA2 OOCL NORFOLK 180</div>

                                                <div class="item-title">Advanced Customs Manifest</div>
                                                <div class="item-content">Required</div>

                                                <div class="item-title">Unified Consignment Reference Submission</div>
                                                <div class="item-content">None</div>
                                                <div class="item-title">Container Size / Type & Cargo</div>
                                                <div class="item-content">General / 1 x 40HQ / Animal Bedding</div>
                                                <div class="item-title">Containers</div>
                                                <div class="item-content">
                                                    To pickup empty
                                                </div>

                                                <div class="item-title">Service Offering</div>
                                                <div class="item-content">-</div>

                                                <div class="item-title">Special Requirements</div>
                                                <div class="item-content">-</div>
                                            </div>
                                        </div>
                                        <div class="col-lg-7 col-md-7 col-s-12 col-xs-12 shipment-detail-milestones">
                                            <ul>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            27 Jun<br>
                                                            17:55 AEST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Booking Created</div>
                                                            <div class="item-content">Status: Confirmed</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            09 Jul<br>
                                                            17:55 AEST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Pickup Empty</div>
                                                            <div class="item-content">@ ASF Port Logistics Pty Ltd</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            29 Jul<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">CY Cutoff</div>
                                                            <div class="item-content">@ ASF Port Logistics Pty Ltd</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            01 Aug<br>
                                                            17:55 AEST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Unique Consignment Reference Cutoff</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            3 Aug<br>
                                                            17:55 AEST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated departure from Melbourne</div>
                                                            <div class="item-content">AAA2 OOCL NORFOLK 180</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            04 Aug<br>
                                                            12:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated arrival at Singapore</div>
                                                            <div class="item-content">AAA2 OOCL NORFOLK 180</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            04 Aug<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Cargo Availability</div>
                                                            <div class="item-content">@ PSA Corporation Limited</div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="oal-my-shipment-list-item">
                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div class="promotion-tag-box">
                                                <div class="promotion-tag">
                                                    <img src="../../common/images/icon_promotion_shipment.png">
                                                </div>
                                            </div>
                                            <div class="shipment-number text-nowrap">
                                                <span class="text-bold">4024152380</span>
                                                <span><a href="homepage_notification.html"> <i class="fa fa-bell-o"></i></a></span>
                                            </div>
                                            <div class="latest-event">
                                                <i class="fa fa-circle green-dot">&nbsp;&nbsp;</i> Actual Departure from Liverpool
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div>
                                                <span class="from-to-city">Sowerby Bridge</span><span class="from-to-country"> (GB)</span>
                                            </div>
                                            <div>
                                                <span class="od-city">Southampton (STN)</span>
                                            </div>
                                            <div>
                                                <span class="text-grey">ETD: 24 Jun (Fri)</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <div class="arrow-box">
                                                <div class="oal-promo-item-detail-ss-transhipment-arrow"> </div>
                                                <div class="oal-promo-item-detail-ss-door"></div>
                                            </div>

                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div>
                                                <span class="from-to-city">Pomona</span> <span class="from-to-country">(US)</span>
                                            </div>
                                            <div>
                                                <span class="od-city">Los Angeles (LAS)</span>
                                            </div>
                                            <div>
                                                <span class="text-grey">ETA: 24 Jul (Sun)</span>
                                            </div>
                                        </div>


                                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 action-box">
                                            <div class="btn-quick-chat" title="Chat for any enquiries"></div>

                                        </div>
                                        <div class="add-tag">
                                            <span class="text-grey"><a href="javascript:void(0);">+ Add tag</a></span>
                                            <input maxlength="64"  class="tag-input">
                                            <div class="customer_tag_group">
                                                <i class="fa fa-bookmark-o"></i>
                                                <div class="customer_tag"></div>
                                                <i class="fa fa-remove delete-tag"></i>
                                            </div>
                                        </div>
                                        <div class="btn-view-detail" id="btn_detail4" onclick="showShipmentDetail(this, 'div_shipment_detail4')">
                                            Details <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                        </div>
                                    </div>
                                    <div class="row oal-my-shipment-list-item-detail" id="div_shipment_detail4">
                                        <div class="col-lg-5 col-md-5 col-s-12 col-xs-12">
                                            <div class="shipment-detail-information">
                                                <div class="item-title">BL Details</div>
                                                <div class="item-content">BL No.: 4024152380 - B/L Proforma Ready</div>

                                                <div class="item-title">Agreement No</div>
                                                <div class="item-content">00056556</div>

                                                <div class="item-title">Vessel Voyage</div>
                                                <div class="item-content">AAA2 OOCL NORFOLK 180</div>

                                                <div class="item-title">Advanced Customs Manifest</div>
                                                <div class="item-content">Required</div>

                                                <div class="item-title">Unified Consignment Reference Submission</div>
                                                <div class="item-content">None</div>

                                                <div class="item-title">Container Size / Type & Cargo</div>
                                                <div class="item-content">General / 1 x 40GP / Rubber Granules</div>

                                                <div class="item-title">Containers</div>
                                                <div class="item-content">
                                                    <ul>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109971">OOLU109971 <i class="fa fa-search-plus"></i></a></span></li>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109972">OOLU109972 <i class="fa fa-search-plus"></i></a></span></li>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109974">OOLU109974 <i class="fa fa-search-plus"></i></a></span></li>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109975">OOLU109975 <i class="fa fa-search-plus"></i></a></span></li>
                                                    </ul>
                                                </div>

                                                <div class="item-title">Service Offering</div>
                                                <div class="item-content">
                                                    DD Free Time Extension (Det. Dest. Total Carrier Merchant Rule #1: General Free Times: >= 1 cntr has 14 free Calendar days.)
                                                </div>

                                                <div class="item-title">Special Requirements</div>
                                                <div class="item-content">-</div>
                                            </div>


                                        </div>
                                        <div class="col-lg-7 col-md-7 col-s-12 col-xs-12 shipment-detail-milestones">
                                            <ul>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            22 Jun<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Booking Created</div>
                                                            <div class="item-content">Status: Confirmed</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            23 Jun<br>
                                                            11:43 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Empty Picked up (5/5)</div>
                                                            <div class="item-content">@ Seaforth Terminal</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            23 Jun<br>
                                                            16:22 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Latern Returned (3/5)</div>
                                                            <div class="item-content">@ Seaforth Terminal</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            28 Jun<br>
                                                            15:42 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">SI Received</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            29 Jun<br>
                                                            15:26 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Unique Consignment Reference Cutoff</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            30 Jun<br>
                                                            18:12 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Loaded on Vessel</div>
                                                            <div class="item-content">AAA2 OOCL NORFOLK 180</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            02 Jul<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Actual Departure from Liverpool</div>
                                                            <div class="item-content">AAA2 OOCL NORFOLK 180</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            12 Jul<br>
                                                            13:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Arrival at Montreal</div>
                                                            <div class="item-content">@ ASF Port Logistics Pty Ltd</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            12 Jul<br>
                                                            17:30 EDT
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Cargo Availability</div>
                                                            <div class="item-content">@ CN Rail (Ferndale)</div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="oal-my-shipment-list-item">
                                    <div class="row">
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div class="shipment-number text-nowrap">
                                                <span class="text-bold">4024128580</span>
                                                <span><a href="homepage_notification.html"> <i class="fa fa-bell-o"></i></a></span>
                                            </div>
                                            <div class="latest-event">
                                                <i class="fa fa-circle green-dot">&nbsp;&nbsp;</i> Latern Returned (3/5)
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div>
                                                <span class="from-to-city">Ossett</span><span class="from-to-country"> (GB)</span>
                                            </div>
                                            <div>
                                                <span class="od-city">Southampton (STN)</span>
                                            </div>
                                            <div>
                                                <span class="text-grey">ETD: 19 Jun (Sun)</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <div class="arrow-box">
                                                <div class="oal-promo-item-detail-ss-transhipment-arrow"> </div>
                                                <div class="oal-promo-item-detail-ss-door"></div>
                                            </div>

                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                            <div>
                                                <span class="from-to-city">Tokyo</span> <span class="from-to-country"> (JP)</span>
                                            </div>
                                            <div>
                                                <span class="od-city">Tokyo (TKY)</span>
                                            </div>
                                            <div>
                                                <span class="text-grey">ETA: 08 Jul (Sun)</span>
                                            </div>
                                        </div>

                                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 action-box">
                                            <div class="btn-quick-chat" title="Chat for any enquiries"></div>
                                        </div>
                                        <div class="add-tag">
                                            <span class="text-grey"><a href="javascript:void(0);">+ Add tag</a></span>
                                            <input maxlength="64" class="tag-input">
                                            <div class="customer_tag_group">
                                                <i class="fa fa-bookmark-o"></i>
                                                <div class="customer_tag">Customer</div>
                                                <i class="fa fa-remove delete-tag"></i>
                                            </div>
                                        </div>
                                        <div class="btn-view-detail" id="btn_detail5" onclick="showShipmentDetail(this, 'div_shipment_detail5')">
                                            Details <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                        </div>
                                    </div>
                                    <div class="row oal-my-shipment-list-item-detail" id="div_shipment_detail5">
                                        <div class="col-lg-5 col-md-5 col-s-12 col-xs-12">
                                            <div class="shipment-detail-information">
                                                <div class="item-title">BL Details</div>
                                                <div class="item-content">BL No.: 4024128580 - B/L Proforma Ready</div>

                                                <div class="item-title">Agreement No</div>
                                                <div class="item-content">00003254</div>

                                                <div class="item-title">Vessel Voyage</div>
                                                <div class="item-content">GEX1 OTTAWA EXPRESS 62W25</div>

                                                <div class="item-title">Advanced Customs Manifest</div>
                                                <div class="item-content">Required</div>

                                                <div class="item-title">Unified Consignment Reference Submission</div>
                                                <div class="item-content">6GB399426986000-SLDSSE00009845</div>

                                                <div class="item-title">Container Size / Type & Cargo</div>
                                                <div class="item-content">General / 1 x 20GP / items for pest control</div>

                                                <div class="item-title">Containers</div>
                                                <div class="item-content">
                                                    <ul>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109935">OOLU109935 <i class="fa fa-search-plus"></i></a></span></li>
                                                        <li><span class="oal-container"><a class="popover-link" href="javascript:void(0);" data-trigger="focus" data-toggle="popover" title="OOLU109937">OOLU109937 <i class="fa fa-search-plus"></i></a></span></li>
                                                    </ul>
                                                </div>

                                                <div class="item-title">Service Offering</div>
                                                <div class="item-content">-</div>

                                                <div class="item-title">Special Requirements</div>
                                                <div class="item-content">-</div>
                                            </div>
                                        </div>
                                        <div class="col-lg-7 col-md-7 col-s-12 col-xs-12 shipment-detail-milestones">
                                            <ul>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            12 Jun<br>
                                                            19:51 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Booking Created</div>
                                                            <div class="item-content">Status: Confirmed</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            15 Jun<br>
                                                            16:42 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-finished"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Empty Picked up (5/5)</div>
                                                            <div class="item-content">@ Seaforth Terminal</div>
                                                        </div>
                                                    </div>

                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            18 Jun<br>
                                                            16:48 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-finished"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Latern Returned (3/5)</div>
                                                            <div class="item-content">@ Seaforth Terminal</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            19 Jun<br>
                                                            8:36 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">SI Received</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            19 Jun<br>
                                                            12:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Unique Consignment Reference Cutoff</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            19 Jun<br>
                                                            15:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Loaded on Vessel</div>
                                                            <div class="item-content">AAA1 KOTA LAYAR 062</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            19 Jun<br>
                                                            17:55 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Departure from Liverpool</div>
                                                            <div class="item-content">GEX1 OTTAWA EXPRESS 62W25</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            04 Jul<br>
                                                            17:21 BST
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Transshipment at</div>
                                                            <div class="item-content">@ ASF Port Logistics Pty Ltd</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            27 Jul<br>
                                                            17:55 EDT
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                            <div class="line-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Estimated Arrival at Tokyo</div>
                                                            <div class="item-content">@ ASF Port Logistics Pty Ltd</div>
                                                        </div>
                                                    </div>
                                                </li>

                                                <li>
                                                    <div class="milestone-item">
                                                        <div class="milestone-time">
                                                            27 Jul<br>
                                                            18:10 EDT
                                                        </div>
                                                        <div class="milestone-point">
                                                            <div class="point-width"></div>
                                                            <div class="evt-coming"></div>
                                                        </div>
                                                        <div class="milestone-event">
                                                            <div class="item-title">Cargo Availability</div>
                                                            <div class="item-content"></div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->

        <div class="oal-page-footer">
            <div class="oal-page-footer-detail row">

                <div class="col-lg-6 col-md-6 col-sm-6 text-left">
                    <div class="oal-page-footer-section  ">

                        <div class="oal-page-footer-copyRight ">Copyright © 1998-2016. <br>Orient Overseas Container Line Limited. <br>All rights reserved.</div>
                    </div>

                </div>
                <div class="col-lg-6 col-md-6  col-sm-6">
                    <div class="oal-page-footer-section">
                        <div class="oal-page-footer-phone-images">
                            <img src="../../common/images/phone.png"/>
                        </div>
                        <div class="oal-page-footer-section-message text-left">
                            <div class="oal-page-footer-section-title">OOCL Seabird</div>
                            <p>Your shipment assistance who answer your shipment enquiry anytime anywhere</p>
                            <button class="btn btn-promo-action">Chat for App trial</button>
                        </div>
                        <div class="oal-page-footer-download-images">
                            <div class="oal-page-footer-download-google"></div>
                            <div class="oal-page-footer-download-app"></div>

                        </div>
                    </div>

                </div>


            </div>
        </div>


    </div>

    <div class="oal-page-chat-section">
        <div class="arrow"></div>

        <div class="oal-page-side-bar">
            <div class="oal-page-chat-active-icon"></div>
            <div class="oal-page-chat-active-item" id="btn_chat">
                <div class="icon-text oal-page-chat-icon">Chat</div>
                <span class="badge"> 3 </span>
            </div>
            <div class="oal-page-booking-item">
                <div class="icon-text oal-page-booking-item-icon"><i class="fa fa-gavel" aria-hidden="true"></i><br>Book</div>
            </div>
            <div class="oal-page-side-top">
                <span class="glyphicon glyphicon-arrow-up"></span><div>Top</div>
            </div>
        </div>
        <div class="oal-page-chat-layer">
            <iframe id="chatIframe" src="http://chenji5-3-w7:90/NJS_PRS_CUST/secured/chat?userId=poonhs"></iframe>

        </div>

    </div>
</div>

<!--Search Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="myModalLabel">Search Criteria </h2>
            </div>
            <div class="modal-body">
                <div  class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">ETD</label>
                        <div class="col-sm-9">
                            <div class="input-group oal-datepicker">
                                <input id="etd_date_range" type="text" class="form-control date-range-box"  value="" placeholder="From - To">
                                                            <span class="input-group-addon">
                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                            </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">ETA</label>
                        <div class="col-sm-9">
                            <div class="input-group oal-datepicker">

                                <input id="eta_date_range" type="text" class="form-control date-range-box"  value="" placeholder="From - To">
                                                            <span class="input-group-addon">
                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                            </span>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">POL</label>
                        <div class="col-sm-9">
                            <input type="text" class="input-large form-control"   placeholder="POL" id="pol">
                            <input type="hidden" id="hidden_pol">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">POD</label>
                        <div class="col-sm-9">
                            <input type="text" class="input-large form-control"  placeholder="POD"  id="pod">
                            <input type="hidden" id="hidden_pod">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Reference Tag</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="reftag"  placeholder="Reference Tag">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer text-center">

                <button type="button" id="btnAdvancedSearch" class="btn oal-page-highlight-btn btn-search">Search</button>
            </div>
        </div>
    </div>
</div>
<!--include JS File -->

<script src="../../common/js/jquery-1.12.4.js"></script>
<script src="../../common/js/bootstrap.js"></script>
<script src="../../common/js/dateRangePicker/moment.js"></script>
<script src="../../common/js/dateRangePicker/jquery.daterangepicker.js"></script>
<script src="../../common/js/bootstrap.combobox.js"></script>
<script src="../controler/homepage.js"></script>
<script src="../controler/myshipment.js"></script>
<script type="text/javascript">
    $('.oal-my-shipment-list').hide();
    $('.oal-page-content-shipment-detail').append('<div class="loader">loading</div>');
    setTimeout(function(){
        $('.loader').hide();
        $('.oal-my-shipment-list').show();
    },2000);

</script>
</body>
</html>